<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

    <style type="text/css">
        h3 {
            text-align: center;
        }
        
        .wrapper {
            width: 80%;
            margin: 25px auto;
            border: 1px solid blue;
        }
        
        .wrapper a {
            display: inline-block;
            margin: 10px;
            text-decoration: none;
        }
    </style>

</head>

<body>

    <h3>拾遗</h3>
    <div class="wrapper">
        <ul>
            <li> <a href="html/link.html">超链接</a> </li>
            <li> <a href="html/anchor.html">锚点和锚点链接</a> </li>
            <li> <a href="html/html5.html">在H5中新增的常用标签</a> </li>
            <li> <a href="html/data.html">全局属性/测试data-*属性</a> </li>
            <li> <a href="html/generate.html">内容生成</a> </li>
            <li> <a href="html/input.html">新的input支持</a> </li>
            <li> <a href="html/form-attribute.html">新增的表单属性</a> </li>
            <li> <a href="css2/cascade.html">CSS之层叠</a> </li>
            <li> <a href="css2/inherit.html">CSS之继承</a> </li>
        </ul>
    </div>

    <h3>伪类选择器</h3>
    <div class="wrapper">
        <ul>
            <li> <a href="pseudo-classes/dynamic.html">动态伪类(Dynamic pseudo-classes)</a> </li>
            <li> <a href="pseudo-classes/ui-element.html">UI元素状态伪类(The UI element states pseudo-classes)</a> </li>
            <li> <a href="pseudo-classes/root.html">结构伪类(Structural pseudo-classes) (:root)</a> </li>
            <li> <a href="pseudo-classes/nth-child.html">结构伪类(Structural pseudo-classes) (:nth-child)</a> </li>
            <li> <a href="pseudo-classes/nth-last-child.html">结构伪类(Structural pseudo-classes) (:nth-last-child)</a> </li>
            <li> <a href="pseudo-classes/first-last.html">结构伪类(Structural pseudo-classes) ( :first-child / :last-child )</a> </li>
            <li> <a href="pseudo-classes/nth-of-type.html">结构伪类(Structural pseudo-classes) ( :nth-of-type / :nth-last-of-type )</a> </li>
            <li> <a href="pseudo-classes/first-last-type.html">结构伪类(Structural pseudo-classes) ( :first-of-type / :last-of-type )</a> </li>
            <li> <a href="pseudo-classes/only.html">结构伪类(Structural pseudo-classes) ( :only-child / :only-of-type )</a> </li>
            <li> <a href="pseudo-classes/empty.html">结构伪类(Structural pseudo-classes) ( :empty / :not )</a> </li>
        </ul>
    </div>

    <h3>二维转换</h3>
    <div class="wrapper">
        <ul>
            <li> <a href="transform/transform.html">使用transform实现元素的2D转换</a> </li>
            <li> <a href="transform/translate.html">2D转换之 平移 ( transform : translate )</a> </li>
            <li> <a href="transform/rotate.html">2D转换之 旋转 ( transform : rotate )</a> </li>
            <li> <a href="transform/scale.html">2D转换之 缩放 ( transform : scale )</a> </li>
            <li> <a href="transform/skew.html">2D转换之 倾斜 ( transform : skew )</a> </li>
            <li> <a href="transform/origin.html">transform-origin ( 用于指定元素旋转或缩放时的<b>原点</b>)</a> </li>
        </ul>
    </div>

    <h3>动画</h3>
    <div class="wrapper">
        <ul>
            <li> <a href="animation/experience.html">体验动画效果</a> </li>
            <li> <a href="animation/animation.html">定义动画关键帧、设置动画播放时间和循环次数等</a> </li>
            <li> <a href="animation/direction.html">效果播放方向 (从 0% ~ 100% 或 100% ~ 0% )</a> </li>
            <li> <a href="animation/fill-mode.html">设置CSS动画在执行之前和之后如何将样式应用于其目标</a> </li>
        </ul>
    </div>

    <h3>三维变换</h3>
    <div class="wrapper">
        <ul>
            <li> <a href="transform/perspective.html">透视</a> </li>
            <li> <a href="transform/perspective-property-one.html">透视: 使用 perspective 属性实现 (页面上只有单个元素)</a> </li>
            <li> <a href="transform/perspective-property-more.html">透视: 使用 perspective 属性实现 (页面上只有多个元素)</a> </li>
            <li> <a href="transform/perspective-function-one.html">透视: 使用 perspective() 函数实现 (页面上只有单个元素)</a> </li>
            <li> <a href="transform/perspective-function-more.html">透视: 使用 perspective() 函数实现 (页面上只有多个元素)</a> </li>
        </ul>
    </div>

</body>

</html>